<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
    <script type="text/javascript" src="../js/bootstrap.bundle.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

    <div class="container">

        <div class="input">

            <div class="province">
        
                <div class="title">
                    <h2>选择省份</h2>
                </div>
        
                <div class="btn-group">
                    <button id="select_province_button" class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        请选择省份
                    </button>
                    <ul id="province_list" class="dropdown-menu">
                        <!-- <li><span class="dropdown-item">...</span></li> -->
                    </ul>
                </div>
        
            </div>
                
        
            <div class="city">
        
                <div class="title">
                    <h2>选择城市</h2>
                </div>
                <div class="btn-group">
                    <button disabled id="select_city_button" class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        请选择城市
                    </button>
                    <ul id="city_list" class="dropdown-menu">
                        <!-- <li><span class="dropdown-item">...</span></li> -->
                    </ul>
                </div>
                
            </div>

        </div>

        <div class="output">
            <div class="output-btn">
                <button disabled id="search_button" type="button" class="btn btn-primary">查询</button>
            </div>
            <div class="title">
                <h2>查询您的地区</h2>
            </div>
            <ul id="area_list" class="list-group list-group-flush">
                <!-- <li class="list-group-item">无</li> -->
            </ul>
        </div>

    </div>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            margin-top: 100px;
            display: flex;
            flex-direction: column;
            justify-content:center;
            align-items: center;
        }
        .input {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .province, .city {
            margin: 20px;
        }
        .output {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .output-btn {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>

    <script>
        let provinces = [];
        let province_selected = "";
        let cities = [];
        let city_selected = "";
        let area = [];
        const select_province_button = document.getElementById("select_province_button");
        const province_list = document.getElementById("province_list");
        const select_city_button = document.getElementById("select_city_button");
        const city_list = document.getElementById("city_list");
        const search_button = document.querySelector('#search_button');
        const area_list = document.querySelector("#area_list");

        //点击请选择省份
        select_province_button.addEventListener('click', function(){
            //console.log("click");
            axios({
                method: 'get',
                url: 'https://hmajax.itheima.net/api/province'
            }).then(result => {
                //console.log(result.data.list);
                provinces = result.data.list;
                const province_list = document.getElementById("province_list");
                province_list.innerHTML = result.data.list.map((element, index) => {
                    return `<li><span class="dropdown-item" data-id="province_${index}" style="cursor: pointer">${element}</span></li>`;
                }).join(" ");
            })
            
        })

        //点击具体的省份来选择
        province_list.addEventListener('click', function(e){
            //console.log(e.target.innerHTML);
            province_selected = e.target.innerHTML;
            select_province_button.innerHTML= e.target.innerHTML;
            //选择省份后可选择城市
            select_city_button.disabled = false;
            axios({
                method: 'get',
                url: 'https://hmajax.itheima.net/api/city',
                params: {
                    pname: province_selected
                }
            }).then(result => {
                //console.log(result.data.list);
                cities = result.data.list;
                const city_list = document.getElementById("city_list");
                city_list.innerHTML = result.data.list.map((element, index) => {
                    return `<li><span class="dropdown-item" data-id="city_${index}" style="cursor: pointer">${element}</span></li>`;
                }).join(" ");
            })
            //清除其他内容
            select_city_button.innerHTML = '请选择城市';
            city_selected = '';
            search_button.disabled = true;
            area_list.innerHTML = "";
        })


        //点击请选择城市
        // select_city_button.addEventListener('click', function(){
        // })

        //点击具体城市
        city_list.addEventListener('click', function(e){
            //console.log(e.target.innerHTML);
            city_selected = e.target.innerHTML;
            select_city_button.innerHTML = e.target.innerHTML;
            search_button.disabled = false;
        })


        //查询
        search_button.addEventListener('click', function(){
            //console.log('click');
            axios({
                method: 'get',
                url: 'https://hmajax.itheima.net/api/area',
                params: {
                    pname: province_selected,
                    cname: city_selected
                }
            }).then(result => {
                //console.log(result.data.list);
                area = result.data.list;
                area_list.innerHTML = result.data.list.map((element, index) => {
                    return `<li class="list-group-item" data-id="area_${index}">${element}</li>`
                }).join(" ");
            })
        })

    </script>
</body>
</html>